<template>
  <el-dropdown @visible-change="handleChange">
    <el-space>
      <el-avatar :size="50" :src="avatar" />
      {{ name }}
      <el-icon :class="[flag ? 'change' : '']"><ArrowDown /></el-icon>
    </el-space>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item divided @click="loginout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "TyDropdown",
  props: {
    avatar: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    const flag = ref(false);

    const loginout = () => {
      localStorage.removeItem("token");
      if (route.fullPath !== "/") {
        router.push({ path: "/login", query: { redirect: route.fullPath } });
      } else router.push("/login");
    };

    const handleChange = (val: boolean) => {
      flag.value = val;
    };

    return {
      loginout,
      flag,
      handleChange,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-space {
  cursor: pointer;

  .el-icon {
    transition: transform 0.3s linear;
  }

  .change {
    transform: rotateZ(180deg);
  }
}
</style>